/*
 * @Author: 秦福凯
 * @LastEditTime: 2025-02-14 16:54:51
 * @Description: 全局主题hook
 */
  import { headerTheme} from "@/assets/style/headerCss"
  import { asideTheme} from "@/assets/style/asideCss"
  import { menuTheme} from "@/assets/style/menuCss"
  import { useGlobalStore } from "@/store/global"
  import { storeToRefs } from "pinia"
  import { getLightColor, getDarkColor } from "@/utils/color" //颜色计算
  export const useTheme = () => {
    const globalStore = useGlobalStore()
    const { primary, isDark,isGrey, isWeak,  } = storeToRefs(globalStore)
    // 切换暗黑模式 ==> 同时修改主题颜色、侧边栏、头部颜色
    const switchDark = () => {
      const html = document.documentElement
      if (isDark.value) html.setAttribute("class", "dark")
      else html.setAttribute("class", "")
      setHeaderTheme()
      setAsideTheme()
      changePrimary(primary.value)//初始化颜色
    }

    // 计算并初始化主题色
    const changePrimary = (val) => {
      if (!val) {
        val = primary.value;
        ElMessage({ type: "success", message: `主题颜色已重置为 ${primary.value}` })
      }
      document.documentElement.style.setProperty("--el-color-primary", val)
      document.documentElement.style.setProperty(
        "--el-color-primary-dark-2",
        isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
      );
      for (let i = 1; i <= 9; i++) {
        const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`
        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
      }
    }

    // 设置头部样式 应用Object.entries 将对象转化成可枚举的数组键值对，在通过for of 将键值对循环出来 
    // 最后用document.documentElement.style.setProperty 设置根节点的css
    const setHeaderTheme = () => {
      let type  = "light"
      if (isDark.value) type = "dark"
      const theme = headerTheme[type];
      for(const [key,value] of Object.entries(theme)){
        document.documentElement.style.setProperty(key,value)
      }
    }


    // 灰色和弱色切换
    const changeGreyOrWeak = (type, value) => {
      const body = document.body 
      if (!value) return body.removeAttribute("style");
      const styles = {
        grey: "filter: grayscale(1)",
        weak: "filter: invert(80%)"
      };
      body.setAttribute("style", styles[type]);
      const propName = type === "grey" ? "isWeak" : "isGrey";
      globalStore.setGlobalState(propName, false);
    };


    // 设置侧边栏样式
    const setAsideTheme = () => {
      let type  = "light"
      if (isDark.value) type = "dark"
      const theme = asideTheme[type];
      for (const [key, value] of Object.entries(theme)) {
        document.documentElement.style.setProperty(key, value);
      }
      setMenuTheme()
    }
    
    // 设置菜单样式
    const setMenuTheme = () => {
      let type  = "light"
      if (isDark.value) type = "dark"
      const theme = menuTheme[type];
      for (const [key, value] of Object.entries(theme)) {
        document.documentElement.style.setProperty(key, value);
      }
    };

    // 初始化
    const initTheme = () => {
      if (isGrey.value) changeGreyOrWeak("grey", true);
      if (isWeak.value) changeGreyOrWeak("weak", true);
      switchDark();
    }

    return {
      initTheme,
      switchDark,
      changePrimary,
      setAsideTheme,
      setHeaderTheme,
      changeGreyOrWeak
    }
    
  }








 






